<template>
  <div>
    <div class="head-wrap">
      <div class="shoplogo"> 
        <img src="../assets/shop/shoplogo2.png" alt="">
        <img src="../assets/shop/shoplogo.png" alt="">
      </div>
      <router-link to='/' class="search-wrap"><div class="searchjump"><span></span></div></router-link> 
      <img src="../assets/weapon/my.png" alt="" class="myjump" @click="jumptosearch()">
    </div>
      
        <div class="lunbo" >
 <mt-swipe :auto="4000" id="lunbo">
     <mt-swipe-item><img src="../assets/shop/lunbo01.jpg" alt=""></mt-swipe-item>
  <mt-swipe-item><img src="../assets/shop/lunbo02.jpg" alt=""></mt-swipe-item>
  <mt-swipe-item><img src="../assets/shop/lunbo03.jpg" alt=""></mt-swipe-item>
</mt-swipe>
</div>
<div class='xinpin'>
  <span>新品首售</span>
</div>
<div class="shoplist">
  <router-link :to="{name:'details',params:{data:data[0]}}"><img src="../assets/shop/shop02.jpg" alt="" class="shopimg"></router-link>
  <router-link :to="{name:'details',params:{data:data[1]}}"><img src="../assets/shop/shop01.jpg" alt=""></router-link>
  <router-link :to="{name:'details',params:{data:data[2]}}"><img src="../assets/shop/shop03.jpg" alt=""></router-link>
</div>
<div class="myinfo">
<ul>
  <li @click="jumptosearch()" >登录</li>
  <li>注册</li>
  <li><router-link to='/'>返回主页</router-link></li>
</ul>
</div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      data:[{sdec:'CSGO-折叠伞-深红之网',price:149.00,imgurl:require('../assets/shop/shopp01.jpg')},
      {sdec:'CSGO-CAC主题选手服',price:488.00,imgurl:require('../assets/shop/shopp02.jpg')},
      {sdec:'CS:GO 暴怒野兽帽衫',price:549.00,imgurl:require('../assets/shop/shopp03.jpg')}
      ]
    }
  },
  methods:{
    jumptosearch(){
      console.log(123)
      this.$router.push('/searchsth')
    }
  }
}
</script>

<style lang="scss" scoped>
.head-wrap{
  display: flex;
  height: 3rem;
  background:rgb(230, 80, 80);
   .myjump{
      width:35px
    }
  .shoplogo{
    height:100%;
    width:40%;
    box-sizing: border-box;
    img{
      width: 50%;
      padding: 5px;
      height:100%;
      box-sizing: border-box;
    }
  }
  .search-wrap{
    width:50%;
    .searchjump{
      height:3rem;
      width: 100%;
      background-color: rgb(233, 200, 200);
      border-radius: 30px;
    }
   
  }
}
.shoplist{
  width:100%;
  height: 10rem;
  display: flex;
  img{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
  }
}
.shopimg{
  width: 100%;

}
.myinfo{
  height:100px;
  padding: 20px;
  ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style-type: none;
    padding-left: 0;
    li{
      border:1px solid rgb(189, 176, 176);
      padding:10px 20px;
      outline: none;
      border-radius: 5px;
    }
  }
}
.xinpin{
  height:40px;
  text-align: center;
  span{
    line-height: 40px;
    font-size: .7em;
    color:blue
  }
}
// header{
//   height:3em;
//   // padding-bottom: 10px;
//   background-color:red;
//   position:relative;
//   z-index: -1;
//   display: flex;
//   .shoplogo{
//     width:25%;
//     display: flex;
//     background-color: red;
//     height: 90%;
//     padding-top:5px;
//     img{
//       width: 3em;
//       padding: 5px;
//     }
//   }
//   .searchjump{
//     box-sizing: border-box;
//     // padding: 5px;
//     // border: 1px solid #fff;
//     margin:10px 10px 10px 30px;
//     width:60%;
//     height:70%;
//   background: #fff; 
//   border-radius: 7px;
//   position: relative;
//   }
//   .myjump{
//     width: 2em;
//   }
// }
.lunbo{
    height:15rem;
    // background-color:red;
    position:relative;
    img{
        width: 100%;
        height:100%
    }
    
}
 #lunbo .mint-swipe-indicator.is-active {
    background: red;
}
</style>